<template>
  <!-- 领取红包页面 -->
  <div class="container">
    <!-- 填充位置-->
    <!--<div class="getRedPacket-color">-->
    <!--</div>-->
    <!-- 1.领红包主页面 -->
    <div class="getRedPacket-main">
      <!-- 背景图 -->
      <div class="getRedPacket-bg">
        <div>
          <ul>
            <li class="getRedPacket-item">
              <p @click="rules_redpacket()">红包规则</p>
              <p @click="log_redpacket()">红包记录</p>
            </li>
          </ul>
        </div>
        <!-- “点击领取”按钮-->
        <div class="getRedPacket-btn" @click="getRedPacket()">
          <img src="../../../static/img/activityRedPacket/getRedPacketButton.png"/>
        </div>
      </div>
    </div>

    <!-- 提示弹框 -->
    <div class="toast" v-show="toast_control">
      <div class="toast-container">
        <div class="close" @click="close_toast()"></div>
        <div class="toast-title">
          {{toast_title}}
        </div>
      </div>
    </div>
  </div>

</template>

<script>
  // import {getCookie, setCookie,authorLogin} from "../../utils/util";
  export default{
    data(){
      return {
        toast_control: false,
        toast_title:'',
      }
    },
    created:function () {
      this.$emit('public_footer',false);//隐藏公用底部
    },
    computed: {
    },
    methods:{
      //获得红包
      getRedPacket(){
          var userID = this.$cookies.get("user_id") || localStorage.getItem("user_id") || 10199;



          this.$axios.get( '/api/common/v1/activityRedPacket/getActivityRedPacket?share_userid='+userID,{
            params: {

            }
          }).then((res) => {
            if(res.success){
              //跳转页面
              this.$router.push({ path: '/ShareRedPacket?happenTime='+ res.data.data.happenTime
              + '&randomRedPacket=' +res.data.data.randomRedPacket
              + '&shareRedPacketUserNumber='+ res.data.data.shareRedPacketUserNumber});
            }else{
              //提示明日再来
              this.toast_title=res.msg;
              this.toast_control = true;
            }
          }).catch((error) => {
            console.log(error);
          });

      },
      //关闭弹窗
      close_toast() {
        this.toast_control = false;
      },
      //红包规则
      rules_redpacket(){

        alert("红包规则");
      },
      //红包记录
      log_redpacket(){
        this.$router.push({ path: '/LogRedPacket'});
      },
    }
  }
</script>

<style scoped>
  /*红包*/
  html,body{
    min-height:600px;
  }

  .container {width: 100%;}
  .getRedPacket-main {width: 100%;}
  .getRedPacket-color{height: 1rem;margin: 0 auto;background:#fe4fad;background-size: 100%;}
  .getRedPacket-item {  font-size: 0.3rem;  color: #fff;  }
  .getRedPacket-item p:nth-child(1) {  float: left;  width: 1.61rem;text-align:center;line-height: 0.63rem;background: rgba(00,00,00,0.4);border-radius: 0.1rem;margin: 0.33rem 0.28rem;}
  .getRedPacket-item p:nth-child(2) {  float: right;  width:  1.61rem;text-align:center;line-height: 0.63rem;background: rgba(00,00,00,0.4);border-radius: 0.1rem;margin: 0.33rem 0.28rem;}
  .getRedPacket-bg {
    min-height:600px;
    position: relative;width: 100%;height: 100%;margin: 0 auto;
    background: url("../../../static/img/activityRedPacket/getRedPacketBg.png") no-repeat center top;background-size: 100%;
  }
  .getRedPacket-btn {width: 100%;text-align: center;position: fixed;bottom: 1px;}
  .getRedPacket-btn img{width: 60%}
  .toast {
    position: fixed;top: 50%;
    left: 50%;z-index: 20000;transform: translate(-50%, -50%);width: 70%;background: #fff;border-radius: 0.3125rem;padding: 0.3125rem;
    background-color: rgb(252, 244, 224);
  }
  .toast-container {position: relative;width: 100%;height: 100%;border: 1px dotted #fccc6e;}
  .close {position: absolute;top: -0.5rem;right: -0.5rem;width: 0.8rem;height:0.8rem;background: url("../../../static/img/luckyDraw/close_store.png") no-repeat center top;background-size: 100%;}
  .toast-title {font-size: 0.3rem;color: #fc7939;text-align: center;}
  .toast-btn {display: flex;align-items: center;justify-content: center;margin-bottom: 0.9375rem;}
  .toast-btn div {
    background-image: -moz-linear-gradient(-18deg,
    rgb(242, 148, 85) 0%,
    rgb(252, 124, 88) 51%,
    rgb(252, 124, 88) 99%);}

</style>
